<template>
  <div class="detail">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{path:'/member/list'}">会员服务</el-breadcrumb-item>
      <el-breadcrumb-item >会员购买</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
      <div class="main-top">
        <li v-for="(item,index) in goodsList" :key="index" :class="{
          'click-border': index == id
          }"
          @click="changeId(index)"
        >
          <p>{{ item.name }}</p>
          <span><i>{{ item.price }}</i>元/年</span>
          <br/>
          <br/>
          <span >温馨提示：到期后不会自动续费</span>
        </li>
      </div>
      <div class="main-center">
        <h2>会员特权：</h2>
        <div class="center-li">
          <li v-for="(item,index) in goodsList[id].desc" :key="index">
            {{ item }}
          </li>
        </div>
      </div>
      <div class="main-bottom">
        <h2>支付方式：</h2>
        <div class="bottom-contain">
          <div class="contain-top">
            <el-radio v-model="radioPay" label="1"><el-button class="btn-zfb">支付宝付款</el-button></el-radio>
            <el-radio v-model="radioPay" label="2"><el-button class="btn-vx">微信付款</el-button></el-radio>
          </div>
          <div class="contain-bottom">
            <div class="bottom-left">
              <div class="left-ewm">
                <span>打开手机{{ radioPay === '1' ? '支付宝' : '微信' }}
                  <br/>
                  扫一扫继续支付
                </span>
              </div>
              <span class="left-msg">首次使用请下载手机{{ radioPay === '1' ? '支付宝' : '微信' }}</span>
            </div>
            <div class="bottom-right"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      CopyRight @双碳采购网 2020-2023
    </div>
  </div>
</template>

<script>

export default {
  name: "detail",
  data() {
    return {
      id:null,
      goodsList:[
      {
          name:'VIP1',
          price:4999,
          desc:[
            '1. 短信推送 60 条/月',
            '2. 电脑远程桌面服务 12 次/年',
            '3. 专属人工服务'
          ]
        },
        {
          name:'VIP2',
          price:5999,
          desc:[
            '1. 短信推送 90 条/月',
            '2. 电脑远程桌面服务 18 次/年',
            '3. 专属人工服务'
          ]
        },
        {
          name:'VIP3',
          price:6999,
          desc:[
            '1. 短信推送 90 条/月',
            '2. 电脑远程桌面服务 24 次/年',
            '3. 专属人工服务'
          ]
        },
      ],
      radioPay:'1',
    }
  },
  async created() {
    this.id =  this.$route.query.id
  },
  mounted() {
   
  },
  methods: {
    changeId(id){
      this.id = id
    }
  },
}
</script>

<style lang="scss" scoped>
.detail{
  .main{
    .main-top{
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      li{
        list-style: none;
        width: 280px;
        height: 150px;
        border: 1px solid #999;
        border-radius: 10px;

        span{
          i{
            text-decoration: none;
            color: red;
          }
        }

        
      }

      li:hover{
          border-color: #1dd0b7;
        }
      .click-border{
        border-color: #1dd0b7;
      }
    }
    .main-center{
      text-align: left;
      
      .center-li{
        list-style: none;
        display: flex;
        li{
          margin: 8px;
          border: #1dd0b7 1px solid;
          background-color: #1dd0b711;
          height: 35px;
          border-radius: 3px;
          line-height: 35px;
        }
      }
    }
    .main-bottom{
      text-align: left;

      .bottom-contain{
        .contain-top{
          .btn-zfb{
            background-color: #1d2fd0;
            color: #fff;
          }
          .btn-vx{
            background-color: #019f43;
            color: #fff;
          }
        }

        .contain-bottom{
          margin-top: 20px;
          display: flex;
          justify-content: space-around;

          .bottom-left{
            width: 20%;
           .left-ewm{
            width: 120px;
            height: 150px;
            border: #999 1px solid;
           } 

           .left-msg{
            font-size: 12px;
            border-bottom: #000 1px solid;
           }
          }

          .bottom-right{
            width: 80%;
            background-color: #999;
          }          
        }
      }
    }
  }
  .footer{
    margin-top: 30px;
    font-size: 14px;
  }
}
h2{
  font-size: 16px;
}
</style>
